<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="box flex">
		<view class="head-box">
			<view class="withdrawal-head flex-center">
				<image src="@/page_assistant/static/withdrawal_bg.png" class="withdrawal_bg"></image>
				<template v-if="contentIndex==0">
					<text class="name">累计收益</text>
					<view class="peice-box">
						<text class="icon">￥</text>
						<text class="peice">{{accountInfo.income_sum}}</text>
					</view>
				</template>
				<template v-else>
					<text class="name">累计提现</text>
					<view class="peice-box">
						<text class="icon">￥</text>
						<text class="peice">{{accountInfo.withdraw}}</text>
					</view>
				</template>
			</view>
			<view class="tabList">
				<up-tabs :current="contentIndex" @change="changeTab" :activeStyle="{
					'fontWeight': 'bold',
					'fontSize': '30rpx',
					'color': 'rgba(255,255,255,0.87)'
				}" lineColor="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)" :inactiveStyle="{
				 	'fontWeight': 500,
				 	'fontSize': '30rpx',
				 	'color': 'rgba(255,255,255,0.6)'
				 }" :list="tabList"></up-tabs>
			</view>
		</view>
		<view class="main">
			<swiper class="swiper" @change="changeSwiper" :current="contentIndex">
				<!-- 收益列表 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMoreList(1)">
						<view class="withdrawal-list" v-if="earningsPage.list.length>0">
							<view class="earnings-item flex-row-center" v-for="(item,index) in earningsPage.list"
								:key="item.id">
								<view class="item-top flex-row-center">
									<view class="flex-row-center">
										<text class="name">{{item.detail_name}}</text>
										<!-- <up-icon name="arrow-right" color="#DEDEDE" size="28rpx"></up-icon> -->
									</view>
									<text class="detail">{{item.type_name}}</text>
								</view>
								<view class="item-footer flex-row-center">
									<text class="time">{{item.createtime}}</text>
									<text class="price" v-if="item.money>0">+{{item.money}}元</text>
									<text class="price" v-else>{{item.money}}元</text>
								</view>
							</view>
							<view class="view-more" @click="getMoreList(1)">
								<up-loadmore :status="earningsPage.status" />
							</view>
						</view>
						<!-- 没有数据 -->
						<view class="not-list-view" v-else>
							<up-empty mode="list" iconColor="#A5A6A7" text="暂无收益明细~">
							</up-empty>
						</view>
					</scroll-view>
				</swiper-item>
				<!--提现明细 -->
				<swiper-item>
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMoreList(2)">
						<view class="withdrawal-list" v-if="withdrawalPage.list.length>0">
							<view class="withdrawal-item flex-row-center" v-for="(item,index) in withdrawalPage.list"
								:key="item.id">
								<view class="item-left flex">
									<text class="name">提现明细</text>
									<text class="time">{{item.create_time_text}}</text>
								</view>
								<view class="item-right flex">
									<text class="detail">{{item.status_name}}</text>
									<text class="price" v-if="item.amount>0">+{{item.amount}}元</text>
									<text class="price" v-else>{{item.amount}}元</text>
								</view>
							</view>
							<view class="view-more" @click="getMoreList(2)">
								<up-loadmore :status="withdrawalPage.status" />
							</view>
						</view>
						<!-- 没有数据 -->
						<view class="not-list-view" v-else>
							<up-empty mode="list" iconColor="#A5A6A7" text="暂无提现明细~">
							</up-empty>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		formatDate
	} from '@/utils/utools';
	import {
		assistantStore
	} from '@/stores/assistant.js';
	const assistantInfoStore = assistantStore();
	const assistantInfo = ref(computed(() => assistantInfoStore.assistantInfo));
	const accountInfo = ref(computed(() => assistantInfoStore.accountInfo));
	const status = ref('loading');
	const withdrawalPage = reactive({
		pageSize: 1,
		status: 'more',
		list: []
	});
	const earningsPage = reactive({
		pageSize: 1,
		status: 'loadmore',
		list: []
	})
	const contentIndex = ref(0);
	const tabList = [{
			name: '金额明细'
		},
		{
			name: '提现明细'
		},
	]
	onLoad(async () => {
		uni.showLoading({
			title: '加载中'
		})
		await getEarningList();
		await getWithdrawalList();
		setTimeout(() => {
			uni.hideLoading();
		}, 600)
	});
	const getMoreList = (type) => { //获取更多数据
		if (type === 1) { //更多收益
			if (earningsPage.status === 'nomore' || earningsPage.status === 'loading') return;
			earningsPage.status = 'loading';
			setTimeout(() => {
				getEarningList();
			}, 600)
		} else if (type === 2) { //更多提现
			if (withdrawalPage.status === 'nomore' || withdrawalPage.status === 'loading') return;
			withdrawalPage.status = 'loading';
			setTimeout(() => {
				getWithdrawalList();
			}, 600)
		}
	}
	const getEarningList = async () => { //获取收益明细
		const res = await $Api.assistant.getMoneyLog({
			page: earningsPage.pageSize,
			// type: 2
		})
		if (res.code == '1') {
			if (res.data.list && res.data.list.length > 0) {
				res.data.list.map(val => {
					if (val.createtime) {
						val.createtime = formatDate(val.createtime)
					}
				})
				earningsPage.list = [...earningsPage.list, ...res.data.list];
			}
			if (res.data.totalPage && res.data.totalPage > earningsPage.pageSize) {
				earningsPage.status = 'loadmore';
				earningsPage.pageSize++;
			} else {
				earningsPage.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const getWithdrawalList = async () => { //获取提现明细
		const res = await $Api.assistant.getWithdrawList({
			page: withdrawalPage.pageSize,
			type: 1,
			detail: 3
		})
		if (res.code == '1') {
			if (res.data.list && res.data.list.length > 0) {
				res.data.list.map(val => {
					if (val.createtime) {
						val.createtime = formatDate(val.createtime)
					}
				})
				withdrawalPage.list = [...withdrawalPage.list, ...res.data.list];
			}
			if (res.data.totalPage && res.data.totalPage > withdrawalPage.pageSize) {
				withdrawalPage.status = 'loadmore';
				withdrawalPage.pageSize++;
			} else {
				withdrawalPage.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const changeTab = async (e) => {
		contentIndex.value = e.index;
	}
	const changeSwiper = (e) => {
		contentIndex.value = e.detail.current;
	}
</script>

<style>
	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>
<style lang="scss" scoped>
	.box {
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;
	}

	.main {
		flex: 1;
		box-sizing: border-box;

		.swiper {
			height: 100%;

			.swiper-item {
				height: 100%;
			}
		}

		.scroll-Y {
			height: 100%;
		}
	}

	.withdrawal-head {
		width: 100%;
		height: 202rpx;
		position: relative;
		flex-direction: column;

		.withdrawal_bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.name {
			color: #C6C7C7;
			font-size: 32rpx;
			margin-bottom: 24rpx;
		}

		.peice-box {
			color: #79DED1;
			font-weight: bold;

			.icon {
				font-size: 32rpx;
			}

			.peice {
				font-size: 64rpx;
				margin-left: 6rpx;
			}
		}
	}

	.main {
		width: 100%;
		box-sizing: border-box;
		padding: 26rpx 20rpx;

		.tabList {
			margin-bottom: 20rpx;
		}

		.withdrawal-list {
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 28rpx;
			background: #222528;
			border-radius: 24rpx;

			.earnings-item {
				flex-direction: column;
				justify-content: space-between;

				&:not(:last-child) {
					margin-bottom: 40rpx;
				}

				.item-top {
					width: 100%;
					justify-content: space-between;

					.detail {
						font-size: 28rpx;
						color: #DEDEDE;
					}
				}

				.item-footer {
					width: 100%;
					margin-top: 12rpx;
					justify-content: space-between;
				}

				.name {
					font-weight: bold;
					font-size: 30rpx;
					color: #DEDEDE;
					margin-right: 8rpx;
				}

				.time {
					font-weight: 500;
					font-size: 24rpx;
					color: #5C5E60;
					margin-top: 6rpx;
				}

				.price {
					font-weight: bold;
					font-size: 30rpx;
					color: #DEDEDE;
				}
			}


		}
	}

	.withdrawal-item {
		width: 100%;
		justify-content: space-between;

		&:not(:last-child) {
			margin-bottom: 40rpx;
		}

		.item-left {
			flex-direction: column;
		}
		.item-right{
			flex-direction: column;
		}

		.name {
			font-weight: bold;
			font-size: 30rpx;
			color: $name-color;
		}

		.time {
			font-weight: 500;
			font-size: 24rpx;
			color: $distance-color;
			margin-top: 12rpx;
		}
		.detail{
			font-size: 24rpx;
			color: $distance-color;
		}

		.price {
			font-weight: bold;
			margin-top: 12rpx;
			font-size: 30rpx;
			color: $name-color;
			flex-shrink: 0;
		}
	}
</style>